<template>
  <v-app>
    <v-layout justify-center fill-height>
      <v-flex xs12 sm8 md4 lg4>
        <v-card>
          <v-card-media src="/imgs/avatar-0.png" height="330px" class="white--text">
            <v-container align-start fill-height>
              <v-layout>
                <v-flex>
                  <v-lang-select style="float: right"></v-lang-select>
                </v-flex>
              </v-layout>
            </v-container>
          </v-card-media>
        </v-card>

        <v-container>
          <v-form v-model="valid" ref="loginForm">
            <v-text-field
              :label="$t('login.phone')"
              v-model="loginForm.phone"
              :rules="loginRules.phone"
              prepend-icon="phone_iphone"
              validate-on-blur
              type="text"
              required
            ></v-text-field>
            <v-text-field
              :label="$t('login.password')"
              v-model="loginForm.password"
              :rules="loginRules.password"
              prepend-icon="lock"
              @keyup.enter.native="handleLogin"
              type="password"
              required
            ></v-text-field>
            <v-btn @click="handleLogin" :disabled="!valid" color="primary" block>{{$t('login.logIn')}}</v-btn>
            <v-layout justify-end>
              <router-link to="/retrieve" class="subheading">{{$t('login.retrieve')}}</router-link>
            </v-layout>
          </v-form>

          <v-alert
            outline
            color="error"
            icon="error"
            v-model="alert"
            transition="scale-transition"
            dismissible
          >
            手机或者密码错误，登录失败
          </v-alert>

        </v-container>

        <v-layout justify-center>
          <router-link to="/signup" class="subheading">{{$t('login.signUp')}}</router-link>
        </v-layout>


      </v-flex>
    </v-layout>

    <copyright-footer></copyright-footer>
  </v-app>
</template>

<script>
  import { validatePhone } from '@/utils/validate'
  import CopyrightFooter from '@/components/CopyrightFooter'
  import VLangSelect from '@/components/VLangSelect'
  export default {
    name: 'login',
    components: { VLangSelect, CopyrightFooter },
    data() {
      return {
        alert: false,
        valid: true,
        loginForm: {
          phone: this.$route.query.phone || '',
          password: ''
        },
        loginRules: {
          phone: [v => validatePhone(v) || '手机格式有误'],
          password: [v => !!v || '请填写密码']
        }
      }
    },
    methods: {
      handleLogin() {
        if (this.$refs.loginForm.validate()) {
          this.$store.dispatch('Login', this.loginForm).then(() => {
            this.$router.push({ path: '/' })
          }).catch(() => {
            this.alert = true
            setTimeout(() => {
              this.alert = false
            }, 6000)
          })
        }
      }
    }
  }
</script>
